<template>
	<view class="bottom-container">
		<!-- 左侧容器 -->
		<view class="left-container">
			<!-- 上 -->
		    <view class="upper"></view>
			<!-- 下 -->
		    <view class="lower">
				<view class="ope-deck" v-for="(item,key) in opeList">
					<view class="ope-deck-item" v-for="i in item">
						<img :src="'/static/majiang/' + key + '.png'">
					</view>
				</view>
			</view>
		</view>

		<!-- 右侧容器 -->
		<view class="right-container">
		    <view class="mahjong-item" v-for="item in winningArray">
		      <img :src="'/static/majiang/' + item + '.png'">
		      <view class="label">{{this.deck.deckPoolCounts[item]}}张</view>
		    </view>
		</view>
	</view>	
</template>

<script>
	export default {
		props: ['deck'],
		data() {
			return {
				winningArray: [],
				opeList: {},
			}
		},
		mounted() {
			uni.$on('winning', data=>{
				this.winningArray = data
			});
			uni.$on('ope', data => {
				this.opeList = data
			});
		},
		methods: {
			
		}
	}
</script>

<style>
	img {
		width: 100%;
		height: 100%;
		background-size: cover; /* 图片充满容器 */
	}
	.bottom-container {
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: stretch;
	    background-color: #f1f1f1;
		height: 100%;
	}
	
	.left-container {
	    width: 75%;
	    height: 100%;
	    background-color: #f1f1f1;
	    display: flex;
	    flex-direction: column;
	}
	.upper {
	    flex: 2;
	    background-color: #eaeaea;
	}
	
	.lower {
	    flex: 1;
	    background-color: #d7d7d7;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 10rpx;
	}
	.ope-deck {
	  display: flex;
	  flex-direction: row;
	  height: 60rpx;
	  margin-right: 20rpx;
	  margin-bottom: 10rpx;
	  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	}
	.ope-deck-item {
		height: 100%;
		width: 60rpx;
	}
	
	.right-container {
	    width: 25%;
	    height: 100%;
	    background-color: #a8a8a8;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    flex-wrap: wrap;
	}
	
	.mahjong-item {
	    display: flex;
	    align-items: center;
		text-align: center;
		width: 40%;
		margin-bottom: 2px;
	}
	
	.mahjong-item img {
	    width: 50rpx;
	    height: 70rpx;
	    margin-bottom: 10rpx;
	    border-radius: 5px;
	}
	
	.label {
	    width: 80px;
	}

</style>
